<template>
    <view class="box-card">
        <view class="box-card-tab">
            <view class="box-card-tab-1" :class="activeIndex==0?'box-card-tab-1-active':''"
                @click="tabChange(0)">普通发票</view>
            <view class="box-card-tab-1" :class="activeIndex==1?'box-card-tab-1-active':''"
                @click="tabChange(1)">专用发票
            </view>
        </view>
        <view class="box-card-list">
            <block v-if="activeIndex==0">
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>发票抬头：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_title" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>税务登记号：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_code"  placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>注册场所地址：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_reg_addr"  placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
            </block>
            <block v-if="activeIndex==1">
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>发票抬头：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_title" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>税务登记号：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_code"   placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>开户银行：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_reg_bname" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>开户账号：</view>
                    <view class="input-list-view">
                        <input class="input-1" type="number" v-model="invoiceFrom.inv_reg_baccount" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>注册场所地址：</view>
                    <view class="input-list-view">
                        <input class="input-1" v-model="invoiceFrom.inv_reg_addr" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>联系电话：</view>
                    <view class="input-list-view">
                        <input class="input-1" type="number" v-model="invoiceFrom.inv_reg_phone" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>收票人姓名：</view>
                    <view class="input-list-view">
                        <input class="input-1" type="text" v-model="invoiceFrom.inv_rec_name" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>收票人手机号：</view>
                    <view class="input-list-view">
                        <input class="input-1" type="number" v-model="invoiceFrom.inv_rec_mobphone" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>收票人省份：</view>
                    <view class="input-list-view">
                        <input class="input-1" type="text" v-model="invoiceFrom.inv_rec_province" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
                <view class="input-list-1">
                    <view class="lable"><span class="must">*</span>送票地址：</view>
                    <view class="input-list-view">
                        <input class="input-1" type="text" v-model="invoiceFrom.inv_goto_addr" placeholder="请输入" placeholder-class="input-1-pc"/>
                    </view>
                </view>
            </block>
        </view>
        <view class="footer">
            <view class="footer-but" @click="get_invoice_add()">保存</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: 0,
                invoiceFrom:{
                    inv_title:'',
                    inv_content:'',
                    inv_code:'',
                    inv_reg_bname:'',
                    inv_reg_baccount:'',
                    inv_reg_addr:'',
                    inv_reg_phone:'',
                    inv_rec_name:'',
                    inv_rec_mobphone:'',
                    inv_rec_province:'',
                    inv_goto_addr:'',
                }
            }
        },
        methods: {
            tabChange(index){
                this.activeIndex=index;
            },
            get_invoice_add(){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=member_invoice&op=invoice_add',
                    method: 'post',
                    data: {
                        inv_type:that.activeIndex==0?2:1,//开票类型 1企业 2个人或事业单业
                        inv_title:that.invoiceFrom.inv_title.trim(),
                        inv_content:that.invoiceFrom.inv_content.trim(),
                        inv_code:that.invoiceFrom.inv_code.trim(),
                        inv_reg_bname:that.invoiceFrom.inv_reg_bname.trim(),
                        inv_reg_baccount:that.invoiceFrom.inv_reg_baccount.trim(),
                        inv_reg_addr:that.invoiceFrom.inv_reg_addr.trim(),
                        inv_reg_phone:that.invoiceFrom.inv_reg_phone.trim(),
                        inv_rec_name:that.invoiceFrom.inv_rec_name.trim(),
                        inv_rec_mobphone:that.invoiceFrom.inv_rec_mobphone.trim(),
                        inv_rec_province:that.invoiceFrom.inv_rec_province.trim(),
                        inv_goto_addr:that.invoiceFrom.inv_goto_addr.trim(),
                    },
                }).then(function(res) {
                    if (res.error_code == 0) {
                        uni.showToast({
                        	title:"新增发票成功!",
                        	icon:"none"
                        })
							
						setTimeout(()=>{
							uni.navigateBack({
							    delta:1
							})
						},1000)
                        
                    }else{
                        uni.showToast({
                        	title:res.message,
                        	icon:"none"
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
	.must {
		color: red;
	}
    .box-card {
		background-color: #FFF;
        .box-card-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            padding: 24rpx 0rpx;
            position: fixed;
			flex-grow: 1;
			width: 100%;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
            left: 0;
            right: 0;
			z-index: 5;
            .box-card-tab-1 {
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
				padding: 0 20px;
                color: #333333;
            }

            .box-card-tab-1-active {
                font-size: 28rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #E96A1D;
                position: relative;
            }

            .box-card-tab-1-active::after {
                position: absolute;
                bottom: -4rpx;
                left: 30%;
                right: 30%;
                height: 2rpx;
                content: '';
                background: #E96A1D;
                border-radius: 6rpx;
            }
        }
        .box-card-list {
            padding: 100rpx 30rpx 160rpx;
            .input-list-1{
                margin-bottom: 60rpx;
                .lable{
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .input-list-view{
                    width: 690rpx;
                    height: 88rpx;
                    background: #F6F6F6;
                    border-radius: 5rpx 5rpx 5rpx 5rpx;
                    opacity: 1;
                    margin-top: 20rpx;
                    .input-1{
                        height: 88rpx;
                        padding-left: 20rpx;
                    }
                    .input-1-pc{
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #909090;
                    }
                }
            }
        }
        .footer{
            position: fixed;
            left: 0;
            right: 0;
            bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
            bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
            padding: 0 55rpx 36rpx;
            background-color: #FFF;
			z-index: 5;
            .footer-but{
                height: 88rpx;
                background: linear-gradient(138deg, #EA8C1E 0%, #E84A1D 100%);
                border-radius: 50rpx 50rpx 50rpx 50rpx;
                opacity: 1;
                
                font-size: 34rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                
                display: flex;
                align-items: center;
                justify-content: center;
                image{
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }
</style>